<template>
	<view>
		<view class="tou-box">
			<u--form :model="form" ref="uForm" errorType="toast" labelWidth="160rpx">
				<u-form-item label="参赛姓名：" prop="name" required>
					<u-search shape="square" searchIcon=" " :clearabled="false" :showAction="false" v-model="form.name"
						inputAlign="right" bgColor="#eee" placeholder="请输入姓名"></u-search>
				</u-form-item>
				<u-form-item label="联系方式：" prop="mobile" required>
					<u-search shape="square" searchIcon=" " maxlength="11" :clearabled="false" :showAction="false"
						v-model="form.mobile" inputAlign="right" bgColor="#eee" placeholder="请输入联系方式"></u-search>
				</u-form-item>
				<u-form-item label="参赛图片：" prop="pics" required><text
						class=" u-font-20 m-c-a0">请上传1-4张图片,第一张将作为封面</text></u-form-item>
				<u-upload width="309rpx" height="309rpx" :fileList="form.pics" @afterRead="afterRead"
					@delete="deletePic" multiple :maxCount="4" :previewFullImage="true">
					<u--image :showLoading="true"
						:src="oss + '/christmasr/shangchuan.png'" width="309rpx"
						height="309rpx"></u--image>
				</u-upload>
			</u--form>
			<view class="u-m-t-40" style="color: #000;">
				活动规则
				<text class="m-c-o">*</text>
			</view>
			<view class="bao-info u-m-t-20">1.在规定时间内通过小程序上传自己的家庭照片进行投票评选</view>
			<view class="bao-info">2.活动期间每天每个微信号可投3票</view>
			<view class="bao-info">3.参加投票的照片必须是以展现家庭和睦为中心若是其它无关内容则无效</view>
			<view class="bao-info">4.一切活动解释权归内当家所有</view>
			<view class="m-btn-g2 tijiao" @click="sumit">提交</view>
		</view>
	</view>
</template>

<script>
	import uploadImage from '@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				form: {
					name: '',
					mobile: '',
					pics: []
				},
				rules: {
					name: [{
						required: true,
						message: '请输入参赛姓名',
						trigger: ['blur', 'change']
					}],
					mobile: [{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '请输入正确的联系方式',
						trigger: ['blur', 'change']
					}],
					pics: [{
						required: true,
						type: 'array',
						message: '请上传参赛图片',
						trigger: ['blur', 'change']
					}]
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this.form.pics.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this.form.pics.length;
				lists.map(item => {
					this.form.pics.push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].thumb);
					let item = this.form.pics[fileListLen];
					this.form.pics.splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					fileListLen++;
				}
				console.log(this.form.pics);
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uploadImage(
						url,
						'christmasr/',
						result => {
							setTimeout(() => {
								resolve(result);
							}, 1000);
						},
						result => {
							//这里写上传失败的代码
							console.log(JSON.stringify(result));
						}
					);
				});
			},
			sumit() {
				this.$refs.uForm
					.validate()
					.then(async res => {
						let arr = [];
						for (var i = 0; i < this.form.pics.length; i++) {
							arr.push(this.form.pics[i].url);
						}
						let bao = await this.require('enroll', {
							id: 1,
							name: this.form.name,
							mobile: this.form.mobile,
							images: arr.join(',')
						});
						this.nextNav('back');
					})
					.catch(errors => {});
			}
		}
	};
</script>

<style lang="scss">
	.tou-box {
		margin: 20rpx;
		padding: 30rpx;
		background-color: #fff;
	}

	.bao-info {
		color: #a0a0a0;
		font-size: 20rpx;
		line-height: 40rpx;
	}

	.tijiao {
		width: 300rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 60rpx;
	}
</style>
